<template>
    <div class="filter_drawer">
        <div class="drawer_header">
            <div>环境详情</div>
            <div style="display: flex;align-items: center;">
                <div style="margin-right: 16px;color: #1890ff;cursor: pointer;font-size: 13px;"
                    @click="store.editEnvironment(state.detailDrawer.data)">编辑</div>
                <img src="@/assets/home/del-default.png" style="width: 16px;height: 16px;cursor: pointer;"
                    @click="state.detailDrawer.show = false" alt="">
            </div>

        </div>
        <div class="drawer_body">
            <el-scrollbar height="100%">
                <div class="list">
                    <div class="item item1 flex">
                        <img src="@/assets/home/Windows.png" v-if="state.detailDrawer.data.operating_system == 'Windows'"
                            style="width: 40px;height: 40px;" alt="">
                        <img src="@/assets/home/android.png" v-if="state.detailDrawer.data.operating_system == 'Android'"
                            style="width: 40px;height: 40px;" alt="">
                        <img src="@/assets/home/ios.png" v-if="state.detailDrawer.data.operating_system == 'iOS'"
                            style="width: 40px;height: 40px;" alt="">
                        <img src="@/assets/home/mac.png" v-if="state.detailDrawer.data.operating_system == 'macOS'"
                            style="width: 40px;height: 40px;" alt="">
                        <div class="column" style="margin-left: 8px;">
                            <div class="text1">{{ state.detailDrawer.data.name }}</div>
                            <div class="text2">创建时间:{{ state.detailDrawer.data.created_at }}</div>
                        </div>
                    </div>

                    <div class="item column">
                        <div class="label text3">IP地址:</div>
                        <div class="value text4">{{ state.detailDrawer.data.environment_data.proxy.ip == '' ||
                            state.detailDrawer.data.environment_data.proxy.type == -1 ? '--' :
                            state.detailDrawer.data.environment_data.proxy.ip }}</div>
                    </div>

                    <div class="item column">
                        <div class="label text3">代理信息:</div>
                        <div class="value text4 flex" style="flex-wrap: wrap;">
                            <div class="flex text4" style="width: 49%;">
                                类型：{{
                                    store.getOptionsLabel(state.detailDrawer.data.environment_data.proxy.type,
                                        state.map.procyType)
                                }}
                            </div>
                            <div class="flex text4" style="width: 49%;">
                                主机/端口：{{ state.detailDrawer.data.environment_data.proxy.type == -1 ||
                                    state.detailDrawer.data.environment_data.proxy.host == '' ? '--' :
                                    `${state.detailDrawer.data.environment_data.proxy.host}/${state.detailDrawer.data.environment_data.proxy.port}`
                                }}
                            </div>
                            <div class="flex text4" style="width: 49%;margin-top: 8px;">
                                代理账号：{{ state.detailDrawer.data.environment_data.proxy.username == '' ? '--' :
                                    state.detailDrawer.data.environment_data.proxy.username }}
                            </div>
                        </div>
                    </div>

                    <div class="item column">
                        <div class="label text3">账号:</div>
                        <div class="value text4">
                            <div v-if="state.detailDrawer.data.environment_data.user.plantUser.length == 0">未绑定</div>
                            <div v-else>
                                <div style="display: flex;flex-wrap: wrap;">
                                    <app-user-name
                                        v-for="(item2, index2) in state.detailDrawer.data.environment_data.user.plantUser"
                                        :key="index2" :data="item2" />
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class=" column">
                        <div class="indetail">
                            <div class="indetail_header flex">
                                <div class="indetail_header_item indetail_header_item_active">详细信息</div>
                                <!-- <div class="indetail_header_item"></div> -->
                            </div>
                            <div class="indetail_body">

                                <div class="item column">
                                    <div class="label text3">授权成员:</div>
                                    <div class="value text4">无</div>
                                </div>

                                <div class="item column">
                                    <div class="label text3">浏览器:</div>
                                    <div class="value text4 flex">
                                        <img v-if="state.detailDrawer.data.browser == 'ChroBrowser'"
                                            src="@/assets/home/chro.png"
                                            style="width: 16px;height: 16px;margin-right: 8px;" alt="">
                                        <img v-else src="@/assets/home/chro.png"
                                            style="width: 16px;height: 16px;margin-right: 8px;" alt="">
                                        <div>{{ state.detailDrawer.data.browser }}</div>
                                    </div>
                                </div>

                                <div class="item column">
                                    <div class="label text3">Cookie模式:</div>
                                    <div class="value text4">按环境同步Cookie</div>
                                </div>

                                <div class="item column">
                                    <div class="label text3">User Agent:</div>
                                    <div class="value text4">{{
                                        state.detailDrawer.data.environment_data.base.userAgent.user_agent }}</div>
                                </div>

                                <div class="item column">
                                    <div class="label text3">语言:</div>
                                    <div class="value text4">{{
                                        getLanguages(state.detailDrawer.data.environment_data.hign.language.languages)
                                        }}</div>
                                </div>

                            </div>
                        </div>
                    </div>
                </div>
            </el-scrollbar>
        </div>
    </div>
</template>

<script setup>
const { store, state } = inject('storejs')

const getLanguages = (value) => {
    let a = []
    state.map.languages.forEach(item => {
        if (state.detailDrawer.data.environment_data.hign.language.languages.includes(item.value)) {
            a.push(item.label)
        }
    });

    let str = ''
    str = a.join(',')
    if (str == '') {
        str = '根据系统匹配语言'
    }

    return str
}

</script>

<style lang="scss" scoped>
.filter_drawer {
    position: absolute;
    height: 100%;
    width: 460px;
    background: #fff;
    z-index: 100;
    top: 0;
    right: 0;
    box-shadow: -6px 0 16px -8px #00000014, -9px 0 28px 0 #0000000d, -12px 0 48px 16px #00000008;
    display: flex;
    flex-direction: column;
}

.drawer_header {
    width: 100%;
    height: 55px;
    border-bottom: 1px solid #f0f0f0;
    padding: 0 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: #000000d9;
    font-size: 16px;
}

.drawer_body {
    height: calc(100% - 55px);
    padding: 24px 0 24px 24px;

    .list {
        padding-right: 24px;
        width: 100%;
        display: flex;
        flex-direction: column;

        .item {
            margin-bottom: 24px;
        }

    }
}

.flex {
    display: flex;
    align-items: center;
}

.column {
    display: flex;
    flex-direction: column;
}

.text1 {
    font-size: 16px;
    color: #28282a;
}

.text2 {
    color: #87878b;
    font-size: 12px;
}

.text3 {
    color: #28282a;
    font-size: 14px;
    font-weight: 700;
    margin-bottom: 8px;
}

.text4 {
    color: #87878b;
    font-size: 14px;
}

.user_item {
    padding: 4px 6px;
    // height: 20px;
    border: 1px solid #ececec;
    margin-right: 8px;
    color: #5b5c60;
    font-size: 12px;
    margin-bottom: 8px;
}

.indetail {
    display: flex;
    flex-direction: column;

    .indetail_header {
        .indetail_header_item {
            width: 90px;
            height: 40px;
            display: flex;
            justify-content: center;
            align-items: center;
            border-top: 1px solid #f0f0f0;
            border-left: 1px solid #f0f0f0;
            border-right: 1px solid #f0f0f0;
            cursor: pointer;
        }

        .indetail_header_item_active {
            color: #3569fd;
        }
    }

    .indetail_body {
        min-height: 300px;
        background: #f7f9fc;
        padding: 16px;

        .item {
            margin-bottom: 24px;
        }
    }
}
</style>